<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>公告-家电维修系统</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/all.min.css}" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/">家电维修系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/orders">我的订单</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/profile">个人资料</a>
                    </li>
                    <li class="nav-item" active>
                        <a class="nav-link" href="/announcements">公告</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/forum">论坛</a>
                    </li>
                </ul>
                <div class="d-flex">
                    <button class="btn btn-outline-light" onclick="logout()">退出</button>
                </div>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <div class="row">
            <div class="col-md-8 mx-auto">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">公告列表</h5>
                    </div>
                    <div class="card-body">
                        <div id="announcementList"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加必要的依赖 -->
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.bundle.min.js}"></script>
    <script src="/js/request.js"></script>
    <script>
        // 加载公告列表
        window.loadAnnouncements = function() {
            $.ajax({
                url: '/api/announcements/user',
                type: 'GET',
                data: {
                    userType: 1  // 1表示用户可见
                },
                headers: {
                    'Authorization': 'Bearer ' + localStorage.getItem('token')
                },
                success: function(announcements) {
                    const announcementList = $('#announcementList');
                    announcementList.empty();

                    if (announcements.length === 0) {
                        announcementList.append(`
                            <div class="text-center text-muted">
                                暂无公告
                            </div>
                        `);
                        return;
                    }

                    // 过滤掉只允许维修工查看的公告
                    announcements = announcements.filter(announcement => announcement.type !== 2);

                    announcements.forEach(announcement => {
                        const createdAt = announcement.createdAt;
                        const viewCount = announcement.viewCount;
                        announcementList.append(`
                            <div class="card mb-3">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <h5 class="card-title mb-0">
                                            ${announcement.top ? '<span class="badge bg-danger me-2">置顶</span>' : ''}
                                            ${announcement.title}
                                        </h5>
                                        <small class="text-muted">${createdAt ? new Date(createdAt).toLocaleString() : '未发布'}</small>
                                    </div>
                                    <p class="card-text text-truncate">
                                        ${announcement.content.replace(/<[^>]*>/g, '')}
                                    </p>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <small class="text-muted">浏览次数：${viewCount}</small>
                                        <button class="btn btn-sm btn-primary" onclick="viewAnnouncement(${announcement.id})">
                                            查看详情
                                        </button>
                                    </div>
                                </div>
                            </div>
                        `);
                    });
                },
                error: function(xhr) {
                    if (xhr.status === 401) {
                        window.location.href = '/login';
                    } else {
                        console.error('加载公告列表失败');
                    }
                }
            });
        };

        // 查看公告详情
        window.viewAnnouncement = function(id) {
            window.location.href = `/announcement?id=${id}`;
        };

        // 退出登录
        window.logout = function() {
            localStorage.removeItem('token');
            window.location.href = '/login';
        };

        // 页面加载完成后初始化
        $(document).ready(function() {
            if (!localStorage.getItem('token')) {
                window.location.href = '/login';
                return;
            }
            window.loadAnnouncements();
        });
    </script>
</body>
</html> 